<template>
	<view>
		<l-painter
		  isCanvasToTempFilePath
		  @success="generateSuccess"
		  custom-style="position: fixed; left: 200%"
		  :css="viewMode=='day'?'width: 750rpx; padding-bottom: 40rpx; background: linear-gradient(,#90c0ff 0%, #3586ff 100%)':'width: 750rpx; padding-bottom: 40rpx; background: linear-gradient(,#4294a5 0%, #08294a 100%)'"  
		>
		  <l-painter-image
		    :src="logo"
		    css="margin-left: 40rpx; margin-top: 40rpx; width: 84rpx;  height: 84rpx; border-radius: 50%;"
		  />
		  <l-painter-view
		    css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block"
		  >
		    <l-painter-text
		      :text="appName"
		      css="display: block; padding-bottom: 10rpx; color: #fff; font-size: 32rpx; fontWeight: bold"
		    />
		    <l-painter-text
		      :text="shareInfo.share_title"
		      css="color: rgba(255,255,255,.7); font-size: 24rpx"
		    />
		  </l-painter-view>
		  <l-painter-view
		    css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)"
		  >
		    <l-painter-image
		      :src="shareInfo.share_pic"
		      css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx; border-radius: 12rpx;"
		    />
			<l-painter-view
			css="margin-top: 20rpx; padding: 32rpx;display:flex;justify-content:center;align-items:center;">
				<l-painter-image
				  css="object-position: 50% 50%;width: 150rpx; height: 150rpx;"
				  :src="posterQrcode"
				></l-painter-image>
			</l-painter-view>
		    <l-painter-view css="margin-top: 10rpx;width:100%;display:flex;justify-content:center;align-items:center;">
		      <l-painter-text
		        css="text-align:center;line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 28rpx; width: 520rpx;  box-sizing: border-box"
		        :text="poster_desc"
		      ></l-painter-text>
		    </l-painter-view>
		  </l-painter-view>
		</l-painter>
	</view>
</template>

<script>
	export default {
		name:"fy-poster",
		props:{
			path:{
				type:String,
				default:"/pages/index/index"
			},
			shareInfo:{
				type:Object,
				default:{}
			},
			viewMode:{
				type:String,
				default:"day"
			},
			posterBottomText:{
				type:String,
				default:""
				// default:"长按识别上方二维码"
			},
			posterQrcode:{
				type:String,
				default:""
			},
			appName:{
				type:String,
				default:""
			},
			logo:{
				type:String,
				default:""
			}
		},
		data() {
			return {
				poster_desc:this.posterBottomText
			};
		},
		methods:{
			generateSuccess(e){
				this.$emit("updatePoster",e);
			}
		}
	}
</script>

<style>

</style>